<template>
    <div>
        <BasicTable @register="registerTable" :loading="true" :rowSelection="rowSelection" :pagination="false"
            style="padding:0 5px;margin-bottom:15px">
            <template #toolbar>
                <a-button type="primary" @click="onAddCategoryButtonClick">新增字典分类</a-button>
            </template>
            <template #action="{ column, record }">
                <TableAction :actions="[
                    {
                        icon: 'clarity:note-edit-line',
                        tooltip: '编辑',
                        onClick: onEditCategoryButtonClick.bind(null, record),
                    },
                    {
                        icon: 'ant-design:delete-outlined',
                        color: 'error',
                        tooltip: '删除',
                        popConfirm: {
                            title: '是否确认删除',
                            placement: 'left',
                            confirm: onDeleteCategoryButtonClick.bind(null, record),
                        },
                    },
                ]" />
            </template>
        </BasicTable>
        <AddOrUpdateDictCategory @register="registerAddOrUpdateCategoryForm" @success="afterSuccess" />
    </div>
</template>
<script lang="ts">
import { defineComponent, watch, unref, computed, ref } from 'vue';
import { categoryTableColumns, categoryConditionFormSchema } from './dict.data'
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useMessage } from '/@/hooks/web/useMessage';
const { createMessage } = useMessage();
import { queryCategory, deleteCategory } from '/@/api/platform/dict';
//使用modal弹出窗口
import { useModal } from '/@/components/Modal';
import { QcUnifyTransToChildProps } from '/#/QcUnify';
import { OperationTypeEnum } from '/@/enums/appEnum';
import AddOrUpdateDictCategory from './AddOrUpdateDictCategory.vue';
import { DictCategoryDto } from '/@/api/platform/model/dictModel';
export default defineComponent({
    name: 'DictCategoryIndex',
    components: { AddOrUpdateDictCategory, BasicTable, TableAction },
    emits: ['select'],
    props: ['categorycode'],
    setup(props, { emit }) {
        const [registerAddOrUpdateCategoryForm, { openModal: openAddOrUpdateCategory }] = useModal();
        const [registerTable, { reload }] = useTable({
            api: queryCategory, //api中指定的为table加载数据对应的查询方法
            columns: categoryTableColumns,
            title: '字典分类管理',
            rowKey: 'code',
            formConfig: {
                labelWidth: 50, //设置查询表单中label的宽度
                schemas: categoryConditionFormSchema,
                showResetButton: false, //查询条件部分中是否显示重置按钮
                autoSubmitOnEnter: true, // 回车事件;
                compact: true //紧凑型表单减少mariginBottom
            },
            useSearchForm: true,
            canResize: true,
            showTableSetting: false,
            bordered: true,
            striped: false,
            ellipsis: false,
            indexColumnProps: {
                width: 50
            },
            actionColumn: {
                width: 80,
                title: '操作',
                dataIndex: 'action',
                slots: { customRender: 'action' },
                fixed: 'right', //表格操作列是否固定，不设置时默认固定在右侧
            },
        });
        const selectedRowKeys = ref([]);
        const rowSelection = computed(() => {
            return {
                selectedRowKeys: unref(selectedRowKeys),
                type: 'radio',
                columnWidth: 0,
                onChange: (key) => {
                    emit('select', key[0]);
                    selectedRowKeys.value = key;
                }
            }
        })

        /**
               * 弹窗确认操作之后刷新页面
               */
        function afterSuccess() {
            reload();
        }

        /**
        * 打开新增窗口,将左侧选中的部门id传过去，默认所属部门为左侧选中部门
        */

        function onAddCategoryButtonClick() {
            //构造父组件给子组件传值对象
            let propsData: QcUnifyTransToChildProps = {
                moduleName: '数据字典管理',
                operateType: OperationTypeEnum.ADD,
            };
            openAddOrUpdateCategory(true, propsData);
        }
        /**
         * 打开编辑窗口
         * @param record 
         */
        function onEditCategoryButtonClick(record: DictCategoryDto) {
            //构造父组件给子组件传值对象
            let propsData: QcUnifyTransToChildProps = {
                moduleName: '数据字典管理',
                operateType: OperationTypeEnum.EDIT,
                dataId: record.code,
            };
            openAddOrUpdateCategory(true, propsData);
        }

        /**
         * 删除
         * @param record 
         */
        function onDeleteCategoryButtonClick(record: DictCategoryDto) {
            deleteCategory(record.code)
                .then((res) => {
                    console.log('res', res);
                    //res判断结果：同时==undefined和null
                    if (res == undefined && (res == null || Object.keys(res).length == 0)) {
                        createMessage.success('删除成功。', 2);
                        afterSuccess();
                    }
                })
                .catch((ex) => {
                    console.log('catch ', ex);
                    createMessage.error(ex.msg);
                });
        }
        watch(
            () => props.categorycode,
            (newVal) => {
                let tempArr = [];
                tempArr.push(newVal);
                if (tempArr[0] === selectedRowKeys.value[0]) {
                    return;
                }
                selectedRowKeys.value = tempArr;

            }
        )

        return {
            registerAddOrUpdateCategoryForm,
            openAddOrUpdateCategory,
            registerTable,
            rowSelection,
            afterSuccess,
            onAddCategoryButtonClick,
            onDeleteCategoryButtonClick,
            onEditCategoryButtonClick
        }
    }
})
</script>